<template>
  <div class="car">
    <div class="title">
      <div>
        购物车<span style="margin: 100px"> </span><!--style="background-color: white;color: red"-->
       <el-button  @click="del()" > 删除商品</el-button>
      </div>
    </div>
    <div class="box">
      <div class="section" v-for="item in list" :key="item.rid">
        <div class="top">
          <input
            type="checkbox"
            @change="checkAll(item)"
            v-model="item.selected"
          />
          <img :src="item.url" />
          <span>{{ item.restaurantname }}</span>
        </div>
        <div class="demo" v-for="obj in item.shopcar" :key="obj.id">
          <input type="checkbox" @change="check(item)" v-model="obj.selected" />
          <img :src="obj.menuImg" />
          <div class="txt">
            <h4>{{ obj.dishName }}</h4>
          <!--  <p>
              <span v-for="ts in obj.type">{{ ts }}/</span>
            </p>-->
            <div class="bot">
              <span class="price">单价：￥{{ obj.disPrice }}</span>
             <!-- <button @click="obj.dishNum++">+</button>
              <input type="num" v-model="obj.dishNum" />
              <button @click="obj.dishNum - 1 > 0 ? obj.dishNum&#45;&#45; : 0">-</button>-->
              <template>
                <el-input-number @change="update(obj)" size="mini" v-model="obj.dishNum" :min="1" :max="obj.number" ></el-input-number>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="submit">
      <div class="txt">
        <p>共{{ nums }}件</p>
        <span>总计：￥{{ total.toFixed(2) }}</span>
      </div>
      <div class="but" @click="submit">提交订单</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "car",
  data() {
    return {
      // 购物车数据
      list: [
       /* {
          id: 100,
          name: "四季香",
          selected: true,
          img_url:
            "https://img0.baidu.com/it/u=3139020001,1355531280&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=9ab7195dc6e2a6c9f38d4de9b2773106",
          goods: [
            {
              id: 1001,
              name: "凉拌土豆丝",
              type: ["加辣"],
              price: 66,
              num: 2,
              selected: true,
              img_url:
                "https://img0.baidu.com/it/u=1339625426,2489003464&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },
            {
              id: 1002,
              name: "红烧茄子",
              price: 666,
              num: 1,
              selected: true,
              img_url:
                "https://img0.baidu.com/it/u=3379161665,3282443770&fm=253&fmt=auto?w=500&h=500",
            },
          ],
        },
        {
          id: 200,
          name: "四季不香",
          selected: true,
          img_url:
            "https://img0.baidu.com/it/u=3379161665,3282443770&fm=253&fmt=auto?w=500&h=500",
          goods: [
            {
              id: 2001,
              name: "凉拌土豆丝",
              price: 66,
              num: 3,
              selected: true,
              img_url:
                "https://img0.baidu.com/it/u=3034155785,692274435&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },
            {
              id: 2002,
              name: "红烧茄子",
              price: 12,
              type: ["微辣", "不要香菜"],
              num: 4,
              selected: true,
              img_url:
                "https://img2.baidu.com/it/u=374222474,1753389282&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            },
          ],
        },*/
      ],
      totalPrice:0,
    };
  },

  // 页面加载事件
  created() {
    this.findAll()
  },
  methods: {
    // 删除选中商品
    del(){
      // 需要提交的数据--选中的商品
      let outList = JSON.parse(JSON.stringify(this.list));
      outList = outList.filter((obj) => {
        let arr = obj.shopcar.filter((obj) => obj.selected);
        if (arr.length) {
          obj.shopcar = arr;
          return obj;
        }
      });
      console.log(outList);
      if (outList.length==0) {
        this.$message.error("提交商品不能为空！！！")


      }else {
        this.$http.post("/shopcar/deleteBySelect?",outList).then(res=>{
          if (res.data.code===2000){
            this.$message.success(res.data.msg)
          }else {
            this.$message.error(res.data.msg)
          }
          this.findAll();
        });
      }
  },
    // 修改购物车商品数量
    update(obj){
      this.$http.post("/shopcar/updateById",obj).then(res=>{
        console.log("商品",res)
      })

    },
    // 查询购物车
    findAll() {
      this.$http.get("/shopcar/findAll").then(res => {
        this.list = res.data.data
       /* for (let i = 0; i <this.list.length; i++) {
          this.list[i].selected=true;
        }*/
        console.log("查看数据",this.list)

      })

    },

    // 全选判断
    checkAll(obj) {
      console.log(obj);
      obj.shopcar.forEach((item) => {
        item.selected = obj.selected;
      });
    },
    // 单选、反选
    check(obj) {
      obj.selected = obj.shopcar.every((item) => item.selected);
    },
    // 提交
    submit() {
      // 需要提交的数据--选中的商品
      let outList = JSON.parse(JSON.stringify(this.list));
      outList = outList.filter((obj) => {
        let arr = obj.shopcar.filter((obj) => obj.selected);
        if (arr.length) {
          obj.shopcar = arr;
          return obj;
        }
      });
      // 不需要提交的数据--未选中的商品
      let list = JSON.parse(JSON.stringify(this.list));
      list = list.filter((obj) => {
        let arr = obj.shopcar.filter((obj) => !obj.selected);
        if (arr.length) {
          obj.shopcar = arr;
          return obj;
        }
      });
      this.list = list;
      console.log("剩下不需要提交的数据", list);
      console.log("选中提交的数据", outList.length);
     // console.log("选中提交的数据", outList);
      if (outList.length==0) {

        console.log("总价",  this.totalPrice);

        this.$message.error("提交商品不能为空！！！")


        }else {
        this.$http.post("/shopcar/shopPay?totalPrice="+this.totalPrice,outList).then(res=>{
              console.log(res)

              // 转跳下单成功页面
              this.$router.push("/index/shopCar_");
      });

      }
    },
  },
  computed: {
    // 选中商品数量
    nums() {
      return this.list.reduce((i, v) => {
        return (
          i +
          v.shopcar.filter((obj) => obj.selected).reduce((j, vv) => j + vv.dishNum, 0)
        );
      }, 0);
    },
    // 总计
    total() {
      return this.list.reduce((i, v) => {
        return this.totalPrice=(
          i +
          v.shopcar
            .filter((obj) => obj.selected)
            .reduce((j, vv) => j + vv.dishNum * vv.disPrice, 0)
        );
      }, 0);
    },
  },
};
</script>

<style lang='less' scoped>
* {
  padding: 0;
  margin: 0;
}
.car {
  text-align: center;
  padding-bottom: 130px;
  width: 100vw;
  overflow: hidden;
  background-color: #f1f1f1;
  .title {
    position: fixed;
    width: 100vw;
    line-height: 45px;
    font-weight: 600;
    background-color: #f00;
    color: #fff;
  }
  .box {
    padding-top: 45px;
    .section {
      background-color: #fff;
      margin: 10px;
      padding: 10px 5px;
      border-radius: 10px;
      .top {
        display: flex;
        border-bottom: 1px solid #c4c4c4;
        padding-bottom: 5px;
        > input {
          margin: 0 10px;
        }
        > img {
          margin-left: 13px;
          margin-right: 5px;
          width: 30px;
          height: 30px;
          border-radius: 5px;
        }
        > span {
          line-height: 30px;
        }
      }
      .demo {
        display: flex;
        padding: 10px 0 0 25px;
        > input {
        }
        > img {
          width: 75px;
          height: 75px;
          border-radius: 10px;
          margin: 0 8px;
        }
        > .txt {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          position: relative;
          > h4 {
            margin: 3px 0;
          }
          > p {
            font-size: 14px;
            color: #f00;
          }
          > .bot {
            align-self: flex-end;
            flex-grow: 1;
            text-align: right;
            position: absolute;
            bottom: 0px;
            width: 100%;
            > .price {
              float: left;
              color: #f00;
              font-size: 14px;
            }
            > button {
              width: 25px;
            }
            > input {
              width: 30px;
            }
          }
        }
      }
    }
  }
  .submit {
    position: fixed;
    width: 100vw;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    bottom: 60px;
    > .txt {
      float: left;
      line-height: 20px;
      text-align: left;
    }
    > .but {
      width: 150px;
      line-height: 40px;
      background-color: #35f;
      color: #fff;
      border-radius: 10px;
      float: right;
    }
  }
}
</style>